<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>看清梧桐树</title>
  <include file="./themes/default/portal/cssH.html"/>

  <style>
    .banner {
      display: block;
      width: 100%;
      height: auto;
    }
    .box .el-tabs__header {
      margin-bottom: 0px;
    }

    .box .el-tab-pane {
      border: 2px solid #ccc;
    }

    .box .el-card__body {
      padding: 0;
    }

    .c3 {
      color: #333;
    }

    .c9 {
      color: #999;
    }

    .c6 {
      color: #666;
    }

    .cover {
      margin-right: 5%;
    }

    .cover > img {
      width: 320px;
      height: auto;
    }

    .textData {
      padding-top: 20px;
    }

    .pagination {
      top: -19px;
      background-color: #fff;
      left: 99px;
    }

    @media screen and (min-width: 950px) {
      .padd {
        padding: 51px 82px;
      }

      .box-card {
        border: none;
        padding: 30px 40px;
      }

      .pagination {
        top: -19px;
        background-color: #fff;
        left: 99px;
      }

      .titles{
        font-size: 36px;
      }

      .titles+div{
        font-size: 24px;
      }

      .make h1{
        margin-bottom: 24px;
      }
      .f1n{
        font-size: 18px;
      }
    }

    @media screen and (max-width: 950px) {
      .padd {
        padding: 11px 22px;
      }

      .f1n{
        font-size: 14px;
      }

      .pagination {
        top: 0;
        bottom: 0;
        background-color: #fff;
        left: 0px;
      }

      .box-card {
        border: none;
        padding: 20px 15px;
      }

      .titles{
        font-size: 16px;
      }

      .titles+div{
        font-size: 14px;
      }

      .make h1{
        margin-bottom: 10px;
      }
    }

    .border{
      width: 100%;
      height: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    } .make{
        top: 0;
        left: 0;
        color: #fff;
        width: 100%;
        height: 100%;
      }

    .imgLi {
      width: 15px;
      height: 15px;
      margin-right: 3px;
    }

    .navs {
      margin-top: 20px;
      margin-bottom: 70px;
    }

    .border {
      height: 1px;
      background: #ccc;
      width: 100%;
      margin-top: 10px;
    }

    .border > div {
      top: 0;
      right: 0;
      height: 1px;
      width: 150px;
      background: #6884E3;
    }


  </style>
</head>
<body>
<div id="web">
  <div id="app">
    <include file="./themes/default/portal/header.html"/>

    <div>

      <div class="pr">
        <img class="banner" src="__STATIC__/demo/img/cover5.png" alt="">
        <div class="pa make flex flex-align flex-center">
          <div>
            <h1 class="tc titles">实时资讯一手掌握</h1>
            <div class="f24 tc">Real-time information first hand</div>
          </div>
        </div>
      </div>
      <div class="navs">
        <div>
          <div class="flex">
            <!--    从哪些页进来的    -->
            <div>
              <div class="flex flex-align">
                <img class="imgLi" src="/static/demo/img/d1.png" alt="">
                <div class="f1n" @click="navigatorFun(0)">首页&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;</div>
              </div>
            </div>
            <!--   在当前页的标题    -->
            <div>
              <div class="flex flex-align">
                <img class="imgLi" src="/static/demo/img/d2.png" alt="">
                <div class="f1n">看清梧桐树</div>
              </div>
            </div>
          </div>
          <!--   下边框   -->
          <div class="border pr">
            <div class="pa"></div>
          </div>
        </div>
      </div>



      <el-tabs v-model="activeName" class="box" @tab-click="handleClick">
        <el-tab-pane label="小程序" name="first" class="padd">
          <el-card v-show="list" class="box-card" shadow="hover" :key="index" v-for="(item, index) in list">
            <div @click="goPage(6,item)" class="flex">
              <div class="cover">
                <img :src="item.image" alt="">
              </div>
              <div class="flex-sub textData">
                <div class="flex flex-align">
                  <div class="c3 f18 flex-sub">{{item.title}}</div>
                  <div>
                    <div class="c9 f12 flex flex-align">
                      <div><img style="width: 13px;" src="/static/demo/img/z.png" alt=""></div>
                      <div>{{item.create_time}}</div>
                    </div>
                  </div>
                </div>
                <div class="flex flex-algin dnAndb">
                  <img class="border" src="/static/demo/img/b.png" alt="">
                </div>
                <el-divider class="db" content-position="right"></el-divider>
                <div class="f14 c9">{{item.desc}}</div>
              </div>
            </div>
          </el-card>
          <div v-show="!list" class="tc f14 c9 padd">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="公众号" name="second" class="padd">
          <el-card v-show="list" class="box-card" :key="index" shadow="hover" v-for="(item, index) in list">
            <div @click="goPage(6,item)" class="flex">
              <div class="cover">
                <img :src="item.cover" alt="">
              </div>
              <div class="flex-sub textData">
                <div class="flex flex-align">
                  <div class="c3 f18 flex-sub">{{item.title}}</div>
                  <div>
                    <div class="c9 f12 flex flex-align">
                      <div><img style="width: 13px;" src="/staitc/demo/img/z.png" alt=""></div>
                      <div>{{item.time}}</div>
                    </div>
                  </div>
                </div>
                <div class="flex flex-algin dnAndb">
                  <img class="border" src="/staitc/demo/img/b.png" alt="">
                </div>
                <el-divider class="db" content-position="right"></el-divider>
                <div class="f14 c9">{{item.desc}}</div>
              </div>
            </div>
          </el-card>
          <div v-show="!list" class="tc f14 c9 padd">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="APP" name="third" class="padd">
          <el-card v-show="list" class="box-card" shadow="hover":key="index" v-for="(item, index) in list">
            <div @click="goPage(6,item)" class="flex">
              <div class="cover">
                <img :src="item.cover" alt="">
              </div>
              <div class="flex-sub textData">
                <div class="flex flex-align">
                  <div class="c3 f18 flex-sub">{{item.title}}</div>
                  <div>
                    <div class="c9 f12 flex flex-align">
                      <div><img style="width: 13px;" src="/staitc/demo/img/z.png" alt=""></div>
                      <div>{{item.time}}</div>
                    </div>
                  </div>
                </div>
                <div class="flex flex-algin dnAndb">
                  <img class="border" src="/static/demo/img/b.png" alt="">
                </div>
                <el-divider class="db" content-position="right"></el-divider>
                <div class="f14 c9">{{item.desc}}</div>
              </div>
            </div>
          </el-card>
          <div v-show="!list" class="tc f14 c9 padd">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="网站建设" name="fourth" class="padd">
          <el-card v-show="list" class="box-card" :key="index" shadow="hover" v-for="(item, index) in list">
            <div @click="goPage(6,item)" class="flex">
              <div class="cover">
                <img :src="item.cover" alt="">
              </div>
              <div class="flex-sub textData">
                <div class="flex flex-align">
                  <div class="c3 f18 flex-sub">{{item.title}}</div>
                  <div>
                    <div class="c9 f12 flex flex-align">
                      <div><img style="width: 13px;" src="/static/demo/img/z.png" alt=""></div>
                      <div>{{item.time}}</div>
                    </div>
                  </div>
                </div>
                <div class="flex flex-algin dnAndb">
                  <img class="border" src="/static/demo/img/b.png" alt="">
                </div>
                <el-divider class="db" content-position="right"></el-divider>
                <div class="f14 c9">{{item.desc}}</div>
              </div>
            </div>
          </el-card>
          <div v-show="!list" class="tc f14 c9 padd">暂无数据</div>
        </el-tab-pane>
      </el-tabs>
      <div style="height: 45px; width: 100%;" class="pr">
        <el-pagination
            class="pa pagination dnAndb"
            @size-change="handleSizeChange"
            @current-change="handleSizeChange"
            :current-page.sync="pag"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
      <div class="tr db flex flex-center">
        <el-button size="mini" @click="prev()">上一页</el-button>
        <el-button size="mini" @click="next()">下一页</el-button>
      </div>
      <div style="height: 30px" class="db"></div>
    </div>


  </div>
  <!--  尾  -->
  <include file="./themes/default/portal/footer.html"/>
  <input type="hidden" name="slideList" value='{$info}' id="slideList">

  <script>
  var app = new Vue({
    el: '#web',
    data: {
      show: false,
      navIndex: 2,
      navList: [{title: '网站首页', name: 'main', nav: []}, {title: '看见梧桐树', name: 'see', nav: []}, {
        title: '看清梧桐树',
        name: 'clearly',
        nav: []
      }, {title: '看懂梧桐树', name: 'caseList', nav: []}, {title: '凤栖梧桐', name: 'contact', nav: []}],
      navLists: [
        {title: '网站首页', name: 'main', nav: []},
        {title: '看见梧桐树', name: 'see', nav: ['企业简介', '关于我们']},
        {title: '看清梧桐树', name: 'clearly', nav: ['新闻资讯']},
        {title: '看懂梧桐树', name: 'caseList', nav: ['小程序开发', '公众号开发', 'APP开发', '品牌网站']},
        {title: '凤栖梧桐', name: 'contact', nav: ['品牌网站']}],

      // 手机端导航列表
      navList1: [
        {
          img: '/static/demo/img/nav7.png',
          title: '小程序开发',
          name: 'program'
        },
        {
          img: '/static/demo/img/nav4.png',
          title: 'APP开发',
          name: 'development'
        },
        {
          img: '/static/demo/img/nav6.png',
          title: '公众号开发',
          name: 'publicNumber'
        },
        {
          img: '/static/demo/img/nav5.png',
          title: 'PC/WAP建站',
          name: 'build'
        }
      ],
      list: [],
      total: 0,
      pageSize: 10,
      pag: 1,
      activeName: 'first',
      msg: '',
      name: '',
      text: '',
      phone: ''
    },
    mounted: function () {

    },
    created: function () {
        var slideList = document.getElementById('slideList').value;
        var resSlideList = JSON.parse(slideList);
        console.log(resSlideList)
        this.list = resSlideList.clearlyList.first

    },
    methods: {
      goPage: function (index,item){
        switch (index) {
            case 0:
                window.location.href = "{:url('index/program')}"
                break
            case 1:
                window.location.href = "{:url('index/development')}"
                break
            case 2:
                window.location.href = "{:url('index/publicNumber')}"
                break
            case 3:
                window.location.href = "{:url('index/build')}"
                break
            case 5:
                window.location.href = "{:url('index/caseDetail')}?id ="+item.id+"/name="+item.title
                break;
          case 6:
              window.location.href = "{:url('index/detail')}?id="+item.id+"&name="+item.title
            break
        }
      },
//      导航的跳转
      navigatorFun: function (index){
        switch (index) {
            case 0:
                window.location.href = "{:url('index/index')}"
                break
            case 1:
                window.location.href = "{:url('index/see')}"
                break
            case 2:
                window.location.href = "{:url('index/clearly')}"
                break
            case 3:
                window.location.href = "{:url('index/caseList')}"
                break
            case 4:
                window.location.href = "{:url('index/contact')}"
                break
        }
      },
      //选项卡
      handleClick: function() {
        var _this = this;
        $.post("{:url('Index/clearly')}",{
         page: _this.pag
        },function(data){
            var res = JSON.parse(data)
          _this.list = res.clearlyList[_this.activeName]
//          总条数
          switch (_this.activeName) {
            case 'first':
              //              赋值小程序的列表
              _this.pag = data.data.clearlyList.first_count
              break
            case 'second':
              //公众号
              _this.pag = data.data.clearlyList.second_count
              break
            case 'third':
              //              app
              _this.pag = data.data.clearlyList.third_count
              break
            case 'fourth':
              //              网站建设
              _this.pag = data.data.clearlyList.fourth_count
              break
          }
        })


      },
      prev: function() {
        var _this = this
        _this.pag++
        $.post("{:url('Index/clearly')}",{
          page: _this.pag
        },function(data) {
          console.log(_this.activeName)
          _this.list = data.data.clearlyList[_this.activeName]
        })
      },
      next : function() {
        var _this = this
        _this.pag--
        $.post("{:url('Index/clearly')}",{
          page: _this.pag
        },function(data) {
          console.log(_this.activeName)
          _this.list = data.data.clearlyList[_this.activeName]
        })
      },
      handleSizeChange: function(val) {
        var _this = this
        _this.pag = val
        $.post("{:url('Index/postContact')}",{
              page: _this.pag
            },function(data) {
          console.log(_this.activeName)
          _this.list = data.data.clearlyList[_this.activeName]
        })
      },
      contact: function () {
        var _this = this
        var reg = /^1[5||4||3||6|7||8||9][0-9]{9}$/
        var ref = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (!_this.name || _this.name.length > 30) {
          _this.msg = '请确认您的姓名是否填写（或长度超出30个字符）！'
            return false;

        }
        if (!reg.test(_this.phone) && !ref.test(_this.phone)) {
          _this.msg = '请确认您的邮箱（或手机号）是否填写（或填写的是否正确）！'
            return false;

        }
        if (!_this.msg) {
          _this.msg = '请填写需要解决的行业！'
            return false;

        }
          $.post("{:url('Index/postContact')}",{
              user_name:this.name,
              str:this.phone,
              content:this.msg
          },function(data){
              var res = JSON.parse(data);
              if(res.code == 1){
                  layer.msg('留言成功',function(){
                      window.location.href = "{:url('Index/index')}";
                  });
              }else{
                  layer.msg('网络错误');
              }
          })
      }
    }
  })

</script>
</html>